<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">

        div {
            width: 100px;
            height: 260px;
        }

        div.border {
            border: 2px white solid;
        }

        div.redDiv {
            background-color: red;
        }

        div.blackDiv {
            border: 5px blue solid;
        }


    </style>

    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">


        $(function () {
            /*
    CSS
    css(name|pro|[,val|fn])       读写匹配元素的样式属性。
                                    a.css('color')取出a元素的color
                                    a.css('color',"red")设置a元素的color为red

    CSS 类

    addClass(class|fn) 			为元素添加一个class值;<div class="mini big">
    removeClass([class|fn]) 	删除元素的class值；传递一个具体的class值，就会删除具体的某个class
                                a.removeClass()：移除所有的class值

    **/

            var div = $("div:first");

			//addClass() - 向被选元素添加一个或多个类
			$("#btn01").click(function () {
				div.addClass("redDiv blackDiv");
			});

			//removeClass() - 从被选元素删除一个或多个类
			$("#btn02").click(function () {
			    div.removeClass()
			});

			//toggleClass() - 对被选元素进行添加/删除类的切换操作
			//切换就是如果具有该类那么删除，如果没有那么添加上
			$("#btn03").click(function () {
				div.toggleClass("redDiv blackDiv");
			});

            $('#btn04').click(function () {
				let offset = div.offset();
				console.log("left: " + offset.left + ", top: " + offset.top);
				div.offset({
					top: 40,
					left: 100
				});
			});

        })
    </script>
</head>
<body>

<table align="center">
    <tr>
        <td>
            <div class="border">
            </div>
        </td>

        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01"/>
                <input type="button" value="removeClass()" id="btn02"/>
                <input type="button" value="toggleClass()" id="btn03"/>
                <input type="button" value="offset()" id="btn04"/>
            </div>
        </td>
    </tr>
</table>


<br/> <br/>


<br/> <br/>


</body>
</html>